<template>
    <el-form class="dx-input-baseform" ref="baseForm" :model="form" label-width="80px">
        <el-row>
            <div class="el-table"><div class="el-table__body-wrapper">
            <table  cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
            <tbody><tr v-for="(t,index) in groupFields" :key="index">
                <template  v-for="(f,j) in t">
                    <slot v-if="$scopedSlots[f.columnName + '_view_slot']?
                        $scopedSlots[f.columnName + '_view_slot']:$slots[f.columnName + '_view_slot']" 
                        :name="f.columnName + '_view_slot'" :data="{form:form,column:f,value:form[f.columnName]||''}"></slot>
                    <template v-else>
                    <td rowspan="1" colspan="1"  width="100" align="right" :key="j">
                        <div class="cell">{{f.columnLabel}}</div>
                    </td>
                    <td rowspan="1" :colspan="f.span==2?3:1" :key="'v'+j">
                        <div class="cell">
                            <dx-text :value="formatter(form,{property:f.columnName})" :ctrlName="f.ctrlName" :code-type="f.codeType"></dx-text>
                            <slot :name="f.columnName + '_suffix_view_slot'" :data="{form:form,column:f,value:form[f.columnName]||''}"></slot>
                        </div>
                    </td>
                    </template>
                </template>
            </tr></tbody>
          </table>
          </div></div>
        </el-row>
        <!-- <el-row v-for="(t,index) in groupFields" :key="index">
            <el-col :span="f.span==2?22:11" v-for="(f,j) in t" :key="j">
                <slot v-if="$scopedSlots[f.columnName + '_view_slot']?
                    $scopedSlots[f.columnName + '_view_slot']:$slots[f.columnName + '_view_slot']" 
                    :name="f.columnName + '_view_slot'" :data="{form:form,column:f,value:form[f.columnName]||''}"></slot>
                <el-form-item v-else :label="f.columnLabel" :prop="f.columnName" >
                    <dx-text :value="form[f.columnName]" :ctrlName="f.ctrlName" :code-type="f.codeType"></dx-text>
                </el-form-item>
            </el-col>
        </el-row> -->
        <el-row style="margin-bottom:20px;" v-if="slaveTables && slaveTables.length>0">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane v-for="(table ,index) in slaveTables" :key="index">
                    <span slot="label"><dx-text :value="table.datamodelName" codeType='datamodel_codelist'></dx-text></span>
                    <el-table class="dx-input-slavetable" :row-style="rowStyle" :data="form[table.datamodelName]" border stripe style="width:100%;" :key="index">
                        <el-table-column fixed type="index" label="序号" align="center" width="50"></el-table-column>
                        <template v-for="(col ,_index) in table.fields">
                            <dx-table-column :prop="col.columnName" v-if="col.codeType" :width="col.width"
                                    :fixed="col.fixed"
                                    :align="col.align"
                                    :label="col.columnLabel"
                                    :min-width="col.width"
                                    :formatter="formatter"
                                    :sortable="col.sortable"
                                    :show-overflow-tooltip="true"
                                    :code-type="col.codeType"
                                    :ctrlName="col.ctrlName"
                                    :key="_index"></dx-table-column>
                                    <el-table-column :prop="col.columnName" v-else
                                    :width="col.width"
                                    :fixed="col.fixed"
                                    :align="col.align"
                                    :label="col.columnLabel"
                                    :min-width="col.width"
                                    :sortable="col.sortable"
                                    :formatter="formatter"
                                    :show-overflow-tooltip="true"
                                    :key="_index"></el-table-column>
                        </template>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-row>
        <el-row class="tx-c m-t-20" v-if="cancelVisible">
            <el-button @click="closeDialog">{{cancelText}}</el-button>
        </el-row>
    </el-form>
</template>
<script>
import DxCtrl from '../dx-ctrl';
import DxText from '../dx-text'
import http from '../../../../assets/js/http.js'
import {unitProvider} from '../../../../assets/js/provider.js'
import toolkit from '../../../../assets/js/toolkit.js'
export default {
    components:{
        DxCtrl,
        DxText
    },
    props :{
        id : null,
        unitName : String,
        cancelText:{type:String,default:'取消'},
        cancelVisible:{type:Boolean,default : true}

    },
    data(){
        return {
            activeName : '',
            routeName : '',
            dialogVisible : false,
            formatters : {},
            form : {
            },
            keys : [],
            fields : [],
            slaveTables : [],
            groupFields : [],
        };
    },
    methods:{
        
        closeDialog(){
            this.$emit('update:dialogVisible', false);
        },
        formatter(row, column){
            let mValue = row[column.property];
            if(!mValue){
                return mValue;
            }
            let formatter = this.formatters[column.property];
            if(formatter){
                formatter = "this." + formatter;
                if (typeof (eval(formatter)) != "function") {
                    console.error('函数不存在!');
                    return "";
                }
                return eval(formatter + "(row, column);");
            }else{
                return mValue;
            }

        },
        initData(){

            unitProvider.loadUnitDefine(this.unitName).then(data=>{
                if(data){
                    if(data.tables){
                        data.tables.forEach(t => {
                            if(t.tableType=='master'){
                                if(t.keys){
                                     this.keys = t.keys;
                                }
                                this.fields = t.viewFields;
                                this.fields = this.fields.filter(f=>{return f.visible!=2}); //过滤隐藏的列表
                                this.fields.forEach(field=>{
                                    if(field.formatter){
                                        this.formatters[field.columnName] = field.formatter;
                                    }
                                });
                                let spanCol= (fields) => {
                                    let group = [] ,groups = [];
                                    for(let i=0;i < fields.length;i++){
                                        
                                        if(fields[i].span == 2){
                                            group = [];
                                            group.push(fields[i]);
                                            groups.push(group);
                                            group = [];
                                        }else{
                                            
                                            if(group.length == 2){
                                                group = [];
                                            }
                                            if(group.length==0){ 
                                                groups.push(group);
                                            }
                                            group.push(fields[i]);
                                        }
                                        
                                    }
                                    return groups;
                                }

                                this.groupFields = spanCol(this.fields);

                                
                            }else{//子表

                                this.form[t.datamodelName] = [];
                                let fields = t.viewFields;
                                fields = fields.filter(f=>{return f.visible!=2}); //过滤隐藏的列表
                                this.slaveTables.push({datamodelName:t.datamodelName,fields:fields});
                            }

                           
                        });
                         //
                        _g.openGlobalLoading();
                        this.apiGet("unit/ins/getEntry?unitName="+this.unitName+"&id="+this.id).then(result=>{
                            _g.closeGlobalLoading();
                            if(result.data){
                                this.form = result.data.master;
                                // console.log("this.form",this.form);
                                let slaves = result.data.slaves;
                                if(slaves){
                                    for(let p in slaves){
                                        if(slaves[p]){
                                            slaves[p].forEach(item=>{
                                                item.J_MARK = 3;
                                            });
                                            this.form[p] = slaves[p];
                                        }
                                        
                                    }
                                }
                                this.$emit("data-loaded",result.data);
                            }
                        });


                    }

                }
            });
        }
    },
    created(){
        this.initData();
    },
    mounted(){
        this.routeName = this.$route.name;
        _g.closeGlobalLoading();
    },
    mixins:[http,toolkit]
}
</script>
